/**
 * 修改用户信息
 */
import { Button, Modal,message } from 'antd';
import React, { useState } from 'react';
import axios from 'axios'
import './user.css'

const UpdateUser = (props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 定义用户变量信息进行赋值操作
  //用户id
  const [isUserid,setIsUserid] = useState(" ");
  //用户名称
  const [isUsername,setIsUsername] = useState(" ");
  //用户昵称
  const [isNickname,setIsNickname] = useState(" ");
  //手机号码
  const [isPhone,setIsphone] = useState(" ");
  // 用户角色
  const [isType,setIstype] = useState(" ");

  //提交方法
  const updateUserSubmit = (event) =>{
    //取消事件的默认动作
    event.preventDefault();
    //生命头文件
    let config = {headers:{'Content-Type':'multipart-/form-data'},withCredentials:true}
    //进行后台请求
    axios({
      method:'post',
      url:'http://localhost/mall-basic-service/basic/user/updateUser',
      params:{
        userid:isUserid,
        username:event.target.username.value,
        password:event.target.password.value,
        nickname:event.target.nickname.value,
        type:event.target.type.value,
        phone:event.target.phone.value
      }
    },config).then((response)=>{
      //判断如果成功跳转到登录界面
      const code = response.data.code
      if(code === 200){
        // navigate('/login')
        setIsModalOpen(false);
        window.location.reload()
      }
    }).catch(function (error) {
      //处理异常数据
    })
  }
  /**
   * 显示界面
   */
  const showModal = () => {
    if(props.getUser.length === 0 ){
      message.warning("请选择一条进行修改操作");
    }else if(props.getUser.length > 1){
      message.warning("至多能选择一条数据进行修改");
    }else{
      setIsModalOpen(true)
      // 如果没有问题则进行数据的渲染工作
      setIsUsername(props.getUser[0].username)
      setIsNickname(props.getUser[0].nickname)
      setIsphone(props.getUser[0].phone)
      setIsUserid(props.getUser[0].userid)
      let typeFlag = props.getUser[0].type
      if(typeFlag === 1){
        setIstype("采购人")
      }else if(typeFlag === 2){
        setIstype("供应者")
      }else if(typeFlag === 3){
        setIstype("管理员")
      }
    }
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className={'updateButDiv'}>
      <Button onClick={showModal}>
        修改用户
      </Button>
      <Modal title="修改用户" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <form onSubmit={updateUserSubmit}>
          <label>
            用户名称:&emsp;
            <input className="form-control"  type="text" id='username' name ="username"/></label>&emsp; <span style={{color:'red'}}>{isUsername}</span><br/>
          <label>
            登录密码:&emsp;
            <input className="form-control" type="password" id="password"  name ="password"/></label><br/>
          <label>
            昵称:&emsp;
            <input className="form-control" type="text" id="nickname" name ="nickname"/></label> &emsp;<span style={{color:'red'}}>{isNickname}</span><br/>
          <label>
            用户角色:&emsp;
            <input  type="radio" name="type" id="type" value="1" checked="true"/>采购人 &emsp;
            <input type="radio" name="type" id="type" value="2"/>供应者 &emsp;
            <input type="radio" name="type" id="type" value="3"/>管理员 &emsp;
          </label> <span style={{color:'red'}}>{isType}</span><br/>
          <label>
            手机号码:&emsp;
            <input className="form-control" type="text"  name="phone" id="phone"/>
          </label> &emsp;<span style={{color:'red'}}>{isPhone}</span> <br/>
          <label>
            <button className="btn btn-primary" type="submit">提交</button> &emsp;
            <button className="btn btn-primary" type="reset">重置</button>
          </label>

        </form>
      </Modal>
    </div>
  );
};
export default UpdateUser;
